<template>
  <el-dialog title="配送区域" :visible.sync="dialogVisible">
    <div 
      v-for="regionQy in regionGroups"
      :key="regionQy.code"
      class="region-part__block">
      <el-checkbox
        class="qy-check-all"
        :indeterminate="regionQy.isIndeterminate"
        v-model="regionQy.checkAll"
        @change="handleQyCheckAllChange($event, regionQy)">
        {{regionQy.name}}
      </el-checkbox>
      <el-checkbox-group
        v-model="regionQy.checkedRegions"
        @change="handleQyCheckedChange($event, regionQy)"
        class="region-part__province"
        style="display: inline-block;">
        <el-checkbox
          class="region-checkbox"
          v-for="region in regionQy.regions"
          :label="region.code"
          :key="region.code">
          {{region.name}}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getAreaTree } from '@/api/public'

export default {
  data() {
    return {
      dialogVisible: false,
      regions: [],
      checkedRegions: [],
      regionQyGroups: {
        'db': ['辽宁省', '吉林省', '黑龙江省'],
        'hd': ['上海市', '江苏省', '浙江省', '安徽省', '江西省'],
        'hz': ['河南省', '湖北省', '湖南省'],
        'hn': ['福建省', '广东省', '广西壮族自治区', '海南省'],
        'hb': ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '山东省'],
        'xb': ['陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区'],
        'xn': ['重庆市', '四川省', '贵州省', '云南省', '西藏自治区'],
        'gat': ['台湾省', '香港特别行政区', '澳门特别行政区']
      },
      regionGroups: {
        'db': {
          code: 'db',
          name: '东北',
          checkAll: true,
          isIndeterminate: false,
          checkedRegions: [],
          regions: []
        },
        'hd': {
          code: 'hd',
          name: '华东',
          checkAll: true,
          isIndeterminate: false,
          checkedRegions: [],
          regions: []
        },
        'hz': {
          code: 'hz',
          name: '华中',
          checkAll: true,
          isIndeterminate: false,
          checkedRegions: [],
          regions: []
        },
        'hn': {
          code: 'hn',
          name: '华南',
          checkAll: true,
          isIndeterminate: false,
          checkedRegions: [],
          regions: []
        },
        'hb': {
          code: 'hb',
          name: '华北',
          checkAll: true,
          isIndeterminate: false,
          checkedRegions: [],
          regions: []
        },
        'xb': {
          code: 'xb',
          name: '西北',
          checkAll: true,
          isIndeterminate: false,
          checkedRegions: [],
          regions: []
        },
        'xn': {
          code: 'xn',
          name: '西南',
          checkAll: true,
          isIndeterminate: false,
          checkedRegions: [],
          regions: []
        },
        'gat': {
          code: 'gat',
          name: '港澳台',
          checkAll: true,
          isIndeterminate: false,
          checkedRegions: [],
          regions: []
        }
      }
    }
  },
  created() {
    this.getAreaTree()
  },
  methods: {
    show() {
      this.dialogVisible = true
    },
    close() {
      this.dialogVisible = false
    },
    getAreaTree() {
      getAreaTree().then(res => {
        this.regions = res.data ? res.data : []
        this.regions.forEach(region => {
          for (const key in this.regionQyGroups) {
            if (this.regionQyGroups[key].includes(region.name)) {
              this.regionGroups[key].regions.push(region)
              this.regionGroups[key].checkAll && this.regionGroups[key].checkedRegions.push(region.code)
            }
          }
        })
      })
    },
    handleQyCheckAllChange(val, regionQy) {
      Object.assign(regionQy, {
        checkedRegions: val ? regionQy.regions.map(obj => obj.code) : [],
        isIndeterminate: false,
        checkAll: val
      })
    },
    handleQyCheckedChange(e, regionQy) {
      regionQy.isIndeterminate = !!regionQy.checkedRegions.length && (regionQy.checkedRegions.length < regionQy.regions.length)
      regionQy.checkAll = regionQy.checkedRegions.length === regionQy.regions.length
    },
    onSubmit() {
      this.$emit('change', this.regionGroups)
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.region-part__block {
  display: flex;
  margin-bottom: 10px;
  .qy-check-all {
    flex-basis: 15%;
  }
  .region-part__province {
    flex-basis: 85%;
    .region-checkbox {
      width: 32%;
      margin: 0 0 10px 0;
    }
  }
}
</style>